<template>
	<div>
		<div class="search-bar">
			<Button type="primary" icon="ios-search" @click="SearchCard()">搜索</Button>
			<Button type="primary" icon="plus-round" @click="ShowAddCard">添加</Button>
		</div>
		<Table border :context="self" :columns="columns" :data="cardData"></Table>
		<Page :total="count" :page-size="size" show-total show-elevator @on-change="ChangePage" style="padding:10px"></Page>
		<Modal v-model="CardModal" :closable="false" :title="CardTitle" cancel-text='' width='auto' :styles="CardStyle">
			<Form ref="CardForm" :model="CardForm" :label-width="80">
				<Form-item label="名称" prop="Name">
					<Input v-model="CardForm.Name" placeholder="请输入"></Input>
				</Form-item>
				<Form-item label="描述" prop="Description">
					<Input v-model="CardForm.Description" placeholder="请输入"></Input>
				</Form-item>
				<Form-item label="配送次数" prop="TotalCount">
					<Input v-model="CardForm.TotalCount" placeholder="请输入"></Input>
				</Form-item>
				<Form-item label="是否关闭" prop="IsClosed">
					<Select v-model="CardForm.IsClosed" placeholder="请选择">
						<Option value="true">是</Option>
						<Option value="false">否</Option>
					</Select>
				</Form-item>
			</Form>

		</Modal>
	</div>
</template>
<script>
	import testData from '@/json/TestData.json' //测试用
	export default {
		data() {
				return {
					self: this,
					count: testData.FProductData.Count,
					size: 10,
					currentPage: 1,
					CardTitle: ' ',
					CardModal: false,
					CardStyle: {
						padding: '20px',
						maxWidth: '400px'
					},
					IsAdd:true,
					CardForm: {
						Name: '',
						Description: '',
						TotalCount: 0,
						IsClosed: 'false'
					},
					cardData: testData.FProductData.Data,
					columns: [{
						title: '名称',
						key: 'Name',
						align: 'center'
					}, {
						title: '描述',
						align: 'center',
						key: 'Description'
					}, {
						title: '单位',
						key: 'Unit',
						align: 'center'
					},  {
						title: '营养价值以及做法',
						key: 'Cooking',
						align: 'center'
					}, {
						title: '是否关闭',
						key: 'IsClosed',
						align: 'center',
						render(row, column, index) {
							if((row.IsClosed + '') == 'true') return '是';
							return '否';
						}
					}, {
						title: '操作',
						key: 'Operate',
						align: 'center',
						render(row, column, index) {
							return `<i-button type='primary' @click="ShowUpdateCard(${index})"> 编辑 </i-button>`;
						}
					}]
				}
			}, watch: {
				'cardData': 'watchCardData'
			}, methods: {
				watchCardData() {
					this.count = this.cardData.lenght;
				},
				ShowUpdateCard(index) {
					var row = this.cardData[index];
					this.CardTitle = '编辑卡类型';
					this.CardModal = true;
					this.$set(this.CardForm, 'Name', row.Name);
					this.$set(this.CardForm, 'Description', row.Description);
					this.$set(this.CardForm, 'TotalCount', row.TotalCount);
					this.$set(this.CardForm, 'IsClosed', row.IsClosed + '');
				},
				ShowAddCard() {
					this.CardTitle = '添加卡类型';
					this.CardModal = true;
				},
				SearchCard() {
					var _this = this;
					_this.$Loading.start();
					this.$http.get('src/json/TestData.json').then((response) => {
						console.log(response);
						_this.$Loading.finish();
					}, () => {
						_this.$Loading.error();
						_this.$Message.error('查询失败!');
					});
			},
			ChangePage(p) {
				this.currrentPage = p;
				this.SearchCard();
			},

	}
	}
</script>